<template>
  <div class="setting-center_mall-shop-setting_shop-design">
    <div class="phone-show-html">
      <div class="html-header">
        <img src="../../../../assets/settingCenter/mallShopSetting/close.png" alt="" class="close-img">
        <label>嗨享购商城</label>
        <img src="../../../../assets/settingCenter/mallShopSetting/more.png" alt="" class="more-img">
      </div>
      <div class="html-content">
        <!-- <div class="swiper-img swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
          </div>
          <div class="swiper-pagination" />
        </div> -->
        <div class="shop-info">
          <div class="shop-info-left">
            <img src="../../../../assets/settingCenter/mallShopSetting/close.png" alt="" class="shop-logo-img">
            <div class="shop-name">
              <label class="name">xxxxxx</label>
              <div class="shop-location">
                <img src="../../../../assets/settingCenter/mallShopSetting/location.png" alt="" class="location-img">
                <label>蜂网电子商务F1201</label>
              </div>
            </div>
          </div>
          <div class="shop-info-right">
            <div class="attention-button">
              关注
            </div>
            <div class="item-info">
              <div class="img-border">
                <img src="../../../../assets/settingCenter/mallShopSetting/navigation.png" class="item-info-img">
              </div>
              <label>导航</label>
            </div>
            <div class="item-info">
              <div class="img-border">
                <img src="../../../../assets/settingCenter/mallShopSetting/phone.png" class="item-info-img">
              </div>
              <label>电话</label>
            </div>
            <div class="item-info">
              <div class="img-border">
                <img src="../../../../assets/settingCenter/mallShopSetting/message.png" class="item-info-img">
              </div>
              <label>消息</label>
            </div>
          </div>
        </div>
        <div class="shop-html">
          <phone-html :params="params" />
        </div>
      </div>
    </div>
    <div class="phone-show-setting">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="商户主页" name="1">
          <el-form ref="phoneSettingForm" :model="dataInfo" :rules="rules" label-width="6rem">
            <el-row>
              <el-col :span="24">
                <el-form-item label="商户Logo:" prop="name">
                  <el-upload
                    class="avatar-uploader"
                    :before-upload="beforeUpload"
                    :headers="headers"
                    :on-success="handleSuccess"
                    :data="fileData"
                    :show-file-list="false"
                    name="fileInput"
                    action="http://api.ibeeking.com/api/file/V1/upload"
                    :auto-upload="true"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                  <label>建议尺寸32 × 32像素</label>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="背景图片:" prop="name">
                  <el-upload
                    ref="uploadImg"
                    list-type="picture-card"
                    :before-upload="beforeUpload"
                    :headers="headers"
                    :on-success="handleSuccess"
                    :data="fileData"
                    name="fileInput"
                    :file-list="params.fileList"
                    action="http://api.ibeeking.com/api/file/V1/upload"
                    :auto-upload="true"
                  >
                    <i slot="default" class="el-icon-plus" />
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                          <i class="el-icon-zoom-in" />
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                          <i class="el-icon-download" />
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                          <i class="el-icon-delete" />
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-dialog v-if="dialogVisible" :close-on-click-modal="false" :visible.sync="dialogVisible" :modal-append-to-body="false">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="商户名称:" prop="name">
                  <el-input v-model="dataInfo.name" placeholder="请填写商户名称" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="商户位置:" prop="name">
                  <el-input v-model="dataInfo.name" placeholder="请填写商户位置" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="商户电话:" prop="name">
                  <el-input v-model="dataInfo.name" placeholder="请填写商户电话" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="栏目分组:" prop="name">
                  <el-input v-model="dataInfo.name" placeholder="请填写分组名称" />
                  <el-button class="column-btn">添加</el-button>
                  <label class="column-font">限制5汉字</label>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <vxe-table
            ref="xTable"
            border
            resizable
            row-id="id"
            highlight-hover-row
            :auto-resize="true"
            :data="tableData"
            width
            max-height="500"
            :print-config="{}"
          >
            <vxe-table-column field="seq" min-width="60" title="顺序号" />
            <vxe-table-column field="name" align="center" min-width="100" title="名称" />
            <vxe-table-column field="name1" align="center" min-width="100" title="图标" />
            <vxe-table-column title="操作" fixed="right" align="center" min-width="130" slots="default">
              <template slot-scope="scope">
                {{ scope.row }}
                <el-button type="text" size="mini" icon="el-icon-chat-line-round">修改</el-button>
                <el-button type="text" size="mini" icon="el-icon-chat-line-round">删除</el-button>
              </template>
            </vxe-table-column>
          </vxe-table>
        </el-tab-pane>
        <el-tab-pane label="栏目设计" name="2">
          <el-tabs tab-position="left" style="height: 200px;">
            <el-tab-pane label="专柜活动">
              <div class="radio-line">
                <el-radio v-model="radio" label="1">Banner图片</el-radio>
                <el-radio v-model="radio" label="2">促销卷</el-radio>
                <el-radio v-model="radio" label="3">商品列表</el-radio>
              </div>
              <div v-show="radio === '1'" class="banner-info">
                <div class="btn-info">
                  <el-button class="banner-add-btn" @click="openBannerModal()">添加</el-button>
                </div>
                <vxe-table
                  ref="xTable"
                  border
                  resizable
                  row-id="id"
                  highlight-hover-row
                  :auto-resize="true"
                  :data="tableData"
                  width
                  max-height="500"
                  :print-config="{}"
                >
                  <vxe-table-column field="seq" min-width="60" title="顺序号" />
                  <vxe-table-column field="name" align="center" min-width="100" title="外部链接" />
                  <vxe-table-column field="name1" align="center" min-width="100" title="图片" />
                  <vxe-table-column title="操作" fixed="right" align="center" min-width="130" slots="default">
                    <template slot-scope="scope">
                      {{ scope.row }}
                      <el-button type="text" size="mini" icon="el-icon-chat-line-round">修改</el-button>
                      <el-button type="text" size="mini" icon="el-icon-chat-line-round">删除</el-button>
                    </template>
                  </vxe-table-column>
                </vxe-table>
              </div>
              <div v-show="radio === '2' || radio === '3'" class="banner-info">
                <div class="btn-info">
                  <el-button class="banner-add-btn" @click="openDataTableModal()">添加</el-button>
                </div>
                <vxe-table
                  ref="xTable"
                  border
                  resizable
                  row-id="id"
                  highlight-hover-row
                  :auto-resize="true"
                  :data="tableData"
                  width
                  max-height="500"
                  :print-config="{}"
                >
                  <vxe-table-column field="name" align="center" min-width="100" title="优惠券名称" />
                  <vxe-table-column field="name1" align="center" min-width="100" title="名称备注" />
                  <vxe-table-column field="name1" align="center" min-width="100" title="类型" />
                  <vxe-table-column field="name1" align="center" min-width="100" title="优惠内容" />
                  <vxe-table-column field="name1" align="center" min-width="100" title="状态" />
                  <vxe-table-column field="name1" align="center" min-width="100" title="已领取" />
                  <vxe-table-column title="操作" fixed="right" align="center" min-width="130" slots="default">
                    <template slot-scope="scope">
                      {{ scope.row }}
                      <el-button type="text" size="mini" icon="el-icon-chat-line-round">修改</el-button>
                      <el-button type="text" size="mini" icon="el-icon-chat-line-round">删除</el-button>
                    </template>
                  </vxe-table-column>
                </vxe-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      v-if="bannerDialogVisible"
      :visible.sync="bannerDialogVisible"
      class="bannerDialog"
      title="banner信息维护"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form ref="Form" :model="dataInfo" :rules="bannerRules" label-width="8rem">
        <el-row>
          <el-col :span="24">
            <el-form-item label="banner图片:" prop="name">
              <el-upload
                class="avatar-uploader"
                :before-upload="beforeUpload"
                :headers="headers"
                :on-success="handleSuccess"
                :data="fileData"
                :show-file-list="false"
                name="fileInput"
                action="http://api.ibeeking.com/api/file/V1/upload"
                :auto-upload="true"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否为外部链接:" prop="name">
              <el-select v-model="dataInfo.urlCheck">
                <el-option label="是" value="0" />
                <el-option label="否" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-show="dataInfo.urlCheck === '0'" :span="24">
            <el-form-item label="链接地址:" prop="name">
              <el-input v-model="dataInfo.name" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bannerDialogVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-if="dataTableDialogVisible"
      :visible.sync="dataTableDialogVisible"
      :title="dataTableTitle"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div class="btn-info">
        <el-button class="banner-add-btn">添加</el-button>
      </div>
      <vxe-table
        ref="xTable"
        border
        resizable
        row-id="id"
        highlight-hover-row
        :auto-resize="true"
        :data="tableData"
        width
        max-height="500"
        :print-config="{}"
      >
        <vxe-table-column field="name" align="center" min-width="100" title="优惠券名称" />
        <vxe-table-column field="name1" align="center" min-width="100" title="名称备注" />
        <vxe-table-column field="name1" align="center" min-width="100" title="类型" />
        <vxe-table-column field="name1" align="center" min-width="100" title="优惠内容" />
        <vxe-table-column field="name1" align="center" min-width="100" title="状态" />
        <vxe-table-column field="name1" align="center" min-width="100" title="已领取" />
        <vxe-table-column title="操作" fixed="right" align="center" min-width="130" slots="default">
          <template slot-scope="scope">
            {{ scope.row }}
            <el-button type="text" size="mini" icon="el-icon-chat-line-round">修改</el-button>
            <el-button type="text" size="mini" icon="el-icon-chat-line-round">删除</el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bannerDialogVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import phoneHtml from './phoneHtml'
// import Swiper from 'swiper'
// import 'swiper/swiper.min.css'
export default {
  components: {
    phoneHtml
  },
  data() {
    return {
      htmlStr: '',
      params: [
        {
          type: 0,
          params: {
            title: '标题1',
            tips: '这是副标题哦',
            discountTitle: '这是二级标题'
          }
        },
        {
          type: 2,
          params: {
            title: '标题2',
            tips: '这是副标题2哦',
            discountTitle: '这是二级标题2'
          }
        }
      ],
      dialogVisible: false,
      bannerDialogVisible: false,
      dialogImageUrl: '',
      headers: {
        authorization: ''
      },
      fileData: {
        id: ''
      },
      imageUrl: '',
      rules: {
        name: [
          { required: true, message: '请输入商户名称', trigger: 'blur' }
        ]
      },
      bannerRules: {
        name: [
          { required: true, message: '请输入商户名称', trigger: 'blur' }
        ]
      },
      dataInfo: {
        urlCheck: '0'
      },
      tableData: [],
      activeName: '1',
      radio: '1', // 临时数据
      dataTableDialogVisible: false,
      dataTableTitle: '动态title'
    }
  },
  mounted() {
    console.log('update')
    // var mySwiper = new Swiper('.swiper-container', {
    //   direction: 'horizontal', // 垂直切换选项
    //   loop: true, // 循环模式选项
    //   // 如果需要分页器
    //   pagination: {
    //     el: '.swiper-pagination'
    //   }
    // })
    // console.log('mySwiper', mySwiper)
  },
  methods: {
    test() {
      console.log(1111)
    },
    beforeUpload(file) {
      console.log('file', file)
    },
    handleSuccess(data, file) {
      console.log('data', data)
      console.log('file', file)
    },
    handleRemove(file) {
      console.log(file)
    },
    handleDownload(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleClick() {
      console.log('tabClick')
    },
    openBannerModal() {
      this.bannerDialogVisible = true
    },
    openDataTableModal() {
      this.dataTableDialogVisible = true
    },
    handleClose() {
      console.log('handleClose')
    }
  }
}
</script>

<style lang="scss">
.setting-center_mall-shop-setting_shop-design {
  display: flex;
  width: 100%;
  .phone-show-html {
    width: 375px;
    min-width: 375px;
    height: 567px;
    border-radius: 20px;
    background-color: #eee;
    margin-left: 20px;
    padding: 20px 20px 40px;
    .html-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      >label {
        font-size: 20px;
        font-weight: 600;
      }
      .close-img {
        width: 20px;
        height: 20px;
      }
      .more-img {
        width: 20px;
        height: 20px;
      }
    }
    .html-content {
      height: calc(100% - 40px);
      background: #fff;
      width: 100%;
      margin: 20px 0;
      overflow: auto;
      .swiper-img {
        width: 100%;
        height: 100px;
        .swiper-slide {
          background: red;
        }
      }
      .shop-info {
        display: flex;
        justify-content: space-between;
        border-bottom: 5px solid #eee;
        padding-top: 5px;
        .shop-info-left {
          display: flex;
          align-items: center;
          .shop-logo-img {
            height: 20px;
            width: 20px;
            margin-right: 15px;
          }
          .shop-name {
            text-align: center;
            .name {
              color: aqua;
              font-size: 17px;
            }
            .shop-location {
              display: flex;
              align-items: center;
              .location-img {
                width: 10px;
                height: 10px;
                margin-right: 5px;
              }
              font-size: 12px;
            }
          }
        }
        .shop-info-right {
          display: flex;
          align-items: center;
          .attention-button {
            margin-right: 10px;
            font-size: 14px;
            padding: 0 10px;
            border-radius: 12px;
            background: wheat;
            cursor: pointer;
          }
          .item-info {
            margin-right: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            >label {
              font-weight: 400;
            }
            .img-border {
              padding: 5px;
              border: 1px solid #ccc;
              border-radius: 100%;
              margin-bottom: 5px;
              line-height: 0;
              .item-info-img {
                width: 7px;
                height: 7px;
              }
            }
          }
        }
      }
    }
  }
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 5px;
    margin: 0 30px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .avatar-uploader-icon {
      font-size: 20px;
      color: #8c939d;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
    }
  }
  .phone-show-setting {
    margin:0 30px;
    width: 100%;
    .el-form-item__content {
      display: flex;
      align-items: center;
      .column-btn {
        margin: 0 10px;
      }
      .column-font {
        white-space:nowrap;
      }
    }
    .el-tabs__content {
      padding: 5px 20px
    }
    .radio-line {
      margin-bottom: 20px;
    }
  }
  .bannerDialog {
    .el-upload {
      margin: 0 !important;
    }
  }
  .btn-info {
    display: flex;
    justify-content: flex-end;
    .banner-add-btn {
      margin-bottom: 20px;
    }
  }
}
</style>
